<template>
	<!-- <MySearch :bgcolor="pink"></MySearch> -->
	<MySearch @gotosearch="gotosearch"></MySearch>
	<view class="scroll-view-container">
		<scroll-view scroll-y class="left-scroll-view" :style="{height:windowHeight+'px'}">
			<view class="left-scroll-view-item" v-for="(item,index) in cateList" :key="item.cat_id"
				@click="changeactive(index)" :class="{active:id==index}">
				{{item.cat_name}}
			</view>
		</scroll-view>
		<scroll-view class="right-scroll-view" scroll-y :style="{height:windowHeight+'px'}" :scroll-top="scrollTop">
			<view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="item2.cat_id">
				<view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
				<!-- 动态渲染三级分类的列表数据 -->
				<view class="cate-lv3-list">
					<!-- 三级分类 Item 项 -->
					<view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="item3.cat_id" @click="gotogoodslist(item3)">
						<!-- 图片 -->
						<image :src="item3.cat_icon"></image>
						<!-- 文本 -->
						<text>{{item3.cat_name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import MySearch from '../../components/MySearch/MySearch.vue';
	import { useSetTabBarBadge } from '@/hooks/useSetTabBarBadge.js';
	// 使用组合式函数
	const { setBadge } = useSetTabBarBadge();
	//可使用窗口高度
	const windowHeight = ref(0)
	//分类数据列表
	const cateList = reactive([])
	const id = ref(0)
	// 二级分类列表
	const cateLevel2 = reactive([])
	const scrollTop=ref(0)
	onLoad(() => {
		const systemInfo = uni.getSystemInfoSync()
		windowHeight.value = systemInfo.windowHeight-50
		getcateList()
	})
	//请求分类数据列表
	const getcateList = async () => {
		const {
			data: res
		} = await uni.$http.get('/api/public/v1/categories')
		if (res.meta.status !== 200) {
			return uni.$showMsg()
		}
		cateList.length = 0; // 清空原数组
		cateList.push(...res.message)
		cateLevel2.push(...res.message[0].children)
		// console.log(cateList);
	}
	//切换类名
	const changeactive = (index) => {
		id.value = index
		cateLevel2.length = 0
		cateLevel2.push(...cateList[index].children)
		scrollTop.value=scrollTop==0?1:0
	}
	//跳转商品列表页面
	const gotogoodslist = (item3) => {
		uni.navigateTo({
			url: `/subpkg/goods_list/goods_list?cid=${item3.cat_id}`
		})
	}
	//跳转搜索页面
	const gotosearch=()=>{
		uni.navigateTo({
			url:'/subpkg/search/search'
		})
	}
</script>

<style lang="scss">
	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 120px;

			.left-scroll-view-item {
				line-height: 60px;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 12px;
			}

			// 激活项的样式
			.active {
				background-color: #ffffff;
				position: relative;

				&::before {
					content: '';
					display: block;
					position: absolute;
					width: 3px;
					height: 30px;
					background-color: #C00000;
					left: 0;
					top: 50%;
					margin-top: -15px;
				}
			}
		}
	}

	// .left-scroll-view {
	// 	display: flex;
	// }
	.cate-lv2-title {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		padding: 15px 0;
	}

	.cate-lv3-list {
		display: flex;
		flex-wrap: wrap;

		.cate-lv3-item {
			width: 33.33%;
			margin-bottom: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 60px;
				height: 60px;
			}

			text {
				font-size: 12px;
			}
		}
	}
</style>